<template>
    <div class="mains">
         <li>
             <div class="left">
                  <img :src="item.imgUrl" alt="">
             </div>
             <div class="right">
                  <p class="p1">{{item.title}}</p>
                  <p class="p2">￥{{item.price}}</p>
             </div>
         </li>
    </div>
</template>
<script>
export default {
    props:{
       item:Object,
    },
    components:{

    },
    data(){
        return {

        }
    },
    mounted(){

    }
}
</script>
<style scoped lang="scss">
@import "~@/scss/common.scss";
.mains{
    width:100%;
    overflow-x:hidden;
    li{
        width:100%;
        height:pxTorem(157px);
        display:flex;
        justify-content:space-between;
        padding:0 7px;
        align-items:center;
        margin:pxTorem(7px);
        .left{
            width:pxTorem(157px);
            height:pxTorem(157px);
            img{
                 width:pxTorem(157px);
            height:pxTorem(157px);
            }
        }
        .right{
            flex:1;
            height:100%;
            .p1{
                font-size:pxTorem(15px);
                font-weight:bold;
                margin-left:pxTorem(7px);
            }
            .p2{
                margin-top:pxTorem(50px);
                color:red;
                font-size:pxTorem(14px);
                font-weight:bold;
                margin-left:pxTorem(7px);
            }
        }
    }
}

</style>